---
name: usePrevious
route: /usePrevious
menu: 'State'
edit: false
sidebar: true
---

import JackBox from 'jackbox';

import Demo1 from './demo/demo1';
import Demo1CodeTsx from '!raw-loader!./demo/demo1.tsx';
import Demo1CodeJsx from '!raw-loader!./demo/demo1.jsx';

import Demo2 from './demo/demo2';
import Demo2CodeJsx from '!raw-loader!./demo/demo2.jsx';
import Demo2CodeTsx from '!raw-loader!./demo/demo2.tsx';


# usePrevious

保存上一次渲染时状态的 Hook


## 代码演示

### 基本用法

<JackBox jsCode={Demo1CodeJsx} tsCode={Demo1CodeTsx} demoName='基本用法' description='记录上次的 count 值'>
  <Demo1 />
</JackBox>

### 使用 compare function

<JackBox jsCode={Demo2CodeJsx} tsCode={Demo2CodeTsx} demoName='使用 compare function' description='只有 compare function 返回 true 时，才会记录值的变化'>
  <Demo2 />
</JackBox>

## API
```
const previousState: T = usePrevious<T>(
  state: T,
  compareFunction: (prev: T | undefined, next: T) => boolean
);
```

### Result

| 参数 | 说明     | 类型 |
|------|----------|------|
| previousState | 上次 state 的值 | T  |

### Params

| 参数    | 说明     | 类型                   | 默认值 |
|---------|----------|------------------------|--------|
| state | 需要记录变化的值 | T | -      |
| compareFunction | 可选，自定义值变化的规则 | (prev: T \| undefined, next: T) => boolean | -      |
